<template>
  <div>
    <h3>表单学习</h3>

    <el-form :model="form" :rules="rules">
      <el-form-item prop="username">
        <el-input v-model="form.username" />
      </el-form-item>

      <el-form-item prop="age">
        <el-input v-model="form.age" />
      </el-form-item>

      <el-button>提交</el-button>

      <!-- 希望你给我封装一个按钮组件 -->
      <!-- HmButton这个组件使用体验和button按钮一致 -->
      <!-- <button @click="login">登录</button> -->
      <!-- <div @click></div> -->
      <!-- <Son @add></Son> -->
      <!-- <Demo @click.native="fn"></Demo> -->
      <HmButton />
      <HmButton @click.native="login">登录</HmButton>
      <HmButton>注册</HmButton>

      <!--
        1. 如果组件身上注册了click事件 一定不是原生事件  他是一个自定义事件(组件内部一定出触发了click)
        2. 如果组件不允许注册click事件 直接在事件后 加 .native (将来这个事件就会直接落到组件根元素)
       -->
    </el-form>

    <hr>
    <Son :money.sync="count" />

    <hr>
    <el-date-picker v-model="value" placeholder="请选择出生日期" type="date" />

  </div>
</template>

<script>
import HmButton from '@/components/HmButton.vue'
import Son from './components/Son.vue'
// const fn = () => {}
export default {
  name: 'TestIndex',
  components: {
    HmButton,
    Son
  },
  data() {
    // const a = 1
    // const b = 2
    const fn = (rule, value, callback) => {
      // 自定义验证逻辑 由你的trigger决定什么时候触发!!
      // console.log(1111)
      // console.log(value, callback)
      // value: 就是当前输入框输入的值
      // callback: 函数 类似于守卫next()
      //   你想要通过验证逻辑 不报错 callbak()
      //   你想要在页面中报错 让他不通过验证  callback('年龄不符合要求')
      // if (value === '110') {
      //   callback()
      // } else {
      //   callback('不是110')
      // }
      if (value <= 120 && /^[1-9]\d{0,2}$/.test(value)) {
        callback()
      } else {
        callback('不满足')
      }
    }

    return {
      form: {
        username: '',
        age: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },
          // { min: 5, max: 12, message: '用户名必须5-12', trigger: ['blur', 'change'] }
          { pattern: /^\w{5,12}$/, message: '用户名必须5-12位有效字符', trigger: ['blur', 'change'] }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: ['blur', 'change'] },
          { validator: fn, trigger: ['blur', 'change'] }
        ]
      },
      count: 99,
      value: ''
    }
  },
  methods: {
    login() {
      console.log('login')
    }
    // addFn(val) {
    //   this.count = val
    // }
  }
}
</script>

<style>

</style>
